<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的博客</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>

<body>
  <!-- 整个页面内容的容器，用于设置页面宽度并使其在浏览器中居中显示 -->
  <div class="container">
    <!-- 页面头部区域，包含文章显示数量选择框和登录按钮 -->
    <header class="header">
      <div class="dropdown">
        <select id="article-display-count" onchange="changeArticleDisplayCount()">
          <option value="2">显示2篇文章</option>
          <option value="1">显示1篇文章</option>
          <option value="0">不显示文章</option>
        </select>
      </div>
      <button class="button" onclick="goToLoginPage()">登录</button>
    </header>
    <!-- 侧边栏导航区域，固定在页面左侧，提供不同页面功能的导航链接 -->
    <nav class="sidebar">
      <ul>
        <li class="active" onclick="showHomePage()">首页</li>
        <li onclick="toggleAddArticleForm()">添加文章</li>
        <li>文章分类</li>
        <li onclick="scrollToAboutMe()">关于我</li>
        <li onclick="scrollToContactUs()">联系我们</li>
      </ul>
    </nav>
    <!-- 主体内容区域，用于展示文章列表、“关于我”和“联系我们”等主要内容，设置了左边距以避开侧边栏 -->
    <main class="main-content">
      <h1>首页</h1>
      <!-- 用于存放文章元素的容器，文章将通过JavaScript动态添加到这里 -->
      <div id="articles-container"></div>
      <!-- “关于我”内容展示区域，包含标题和相关介绍内容 -->
      <div id="about-me-section" class="info-section">
        <h2>关于我</h2>
        <p>这里是关于我的一些介绍内容，你可以根据实际情况进行修改和完善，比如个人经历、兴趣爱好、擅长领域等等。</p>
      </div>
      <!-- “联系我们”内容展示区域，包含标题以及联系相关的信息，如邮箱、电话等 -->
      <div id="contact-us-section" class="info-section">
        <h2>联系我们</h2>
        <p>如果你有任何问题、建议或合作意向，请通过以下方式联系我们：</p>
        <ul>
          <li>邮箱：your_email@example.com</li>
          <li>电话：123 - 456 - 7890</li>
        </ul>
      </div>
    </main>
    <!-- 新增文章的表单区域，默认隐藏，点击“添加文章”按钮时显示出来 -->
    <form id="add-article-form" class="add-article-form">
      <label for="article-title">文章标题：</label>
      <input type="text" id="article-title" required>
      <label for="article-content">文章内容：</label>
      <textarea id="article-content" rows="5" required></textarea>
      <button type="submit">提交文章</button>
    </form>
  </div>
</body>

</html>